<template>
    <el-dialog v-model="formVisible" title="添加计划" width="40%" @close="resetFormVisible">
        <!-- 对话主体区域 -->
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="110px">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="计划开始时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  clearable
              />
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  placeholder="计划结束时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  clearable
              />
            </el-form-item>
            <el-form-item label="" prop="maintenanceNo">
              <el-select
                  v-model="form.maintenanceNo"
                  clearable
                  placeholder="选择维护项编号"
                  @change="handleSelectChange"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in selectOptions"
                    :key="item.maintenanceNo"
                    :label="item.maintenanceNo"
                    :value="item.maintenanceNo"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="维护项目" prop="mainteItem">
              <el-input v-model="form.mainteItem" readonly/>
            </el-form-item>
            <el-form-item label="维护要领" prop="mainteEssentials">
              <el-input
                  v-model="form.mainteEssentials"
                  autosize
                  type="textarea"
                  readonly/>
            </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="doAdd">添加</el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { watch, ref } from 'vue'
import { ElMessage } from 'element-plus';
import mpApi from '@/api/maintenancePlan'

const props = defineProps({
  visible: Boolean,
})

const emit = defineEmits(['closeDialog2f', 'freshMaintainPlans2f'])
const formVisible = ref(false);

watch(props, (nweProps, oldPorps) => {
    formVisible.value = nweProps.visible;
})
watch(
    () => props.visible,
    (newVal) => {
      if (newVal) {
        getMaintenanceDefinitionData();
      }
    }
);

// 对话表单
const form = ref({
  maintenanceNo: '',
  startTime: '',
  endTime: '',
  mainteItem: '',
  mainteEssentials: '',
})

const selectOptions = ref([]);
// 获取维修项
const getMaintenanceDefinitionData = async () => {
  const res = await mpApi.getMaintenanceDefinitionData();
  if (res.data.status) {
    //用all前缀来接收保存
    selectOptions.value = res.data.data;
  } else {
    ElMessage.error("获取后端数据失败");
    console.log(res.data.message);
  }
}

// 监听下拉框选择变化
const handleSelectChange = (selectedValue) => {
  const selectedItem = selectOptions.value.find(
      item => item.maintenanceNo === selectedValue
  );
  const maintenanceDefinition = selectedItem;
  form.value.mainteItem = maintenanceDefinition.mainteItem;
  form.value.mainteEssentials = maintenanceDefinition.mainteEssentials;
};

const resetFormVisible = () => {
  formVisible.value = false;
  // 本来要调用ref的resetFields()
  form.value.dataSeq = '';form.value.maintenanceNo = '';form.value.startTime = '';
  form.value.endTime = ''; form.value.mainteItem = '';form.value.mainteEssentials = '';
  emit("closeDialog2f", formVisible.value);
};

const closeDialog = () => {
  resetFormVisible();
}

const doAdd = async () => {
  if (form.value.startTime < form.value.endTime && !!form.value.maintenanceNo){
    const res = await mpApi.insertMaintenancePlan(form.value);
    if (res.data.status) {
      ElMessage.success("添加计划成功")
    } else {
      console.log(res.data.message  + ":" + form);
    }
    resetFormVisible();
  } else {
    ElMessage.info("起止时间或维修项有误");
  }
}
</script>
  